<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员控制面板 - 校园活动社交平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="admin.css">
    <!-- 添加Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
</head>
<body>
    <!-- 登录面板 -->
    <div id="loginPanel" class="login-panel">
        <div class="login-container">
            <div class="login-header">
                <h1>管理员登录</h1>
                <p>校园活动社交平台</p>
            </div>
            <form id="loginForm" class="login-form">
                <div class="form-group">
                    <label for="loginEmail">邮箱</label>
                    <input type="email" id="loginEmail" name="email" required placeholder="请输入管理员邮箱">
                </div>
                <div class="form-group">
                    <label for="loginPassword">密码</label>
                    <input type="password" id="loginPassword" name="password" required placeholder="请输入密码">
                </div>
                <div id="loginError" class="error-message"></div>
                <button id="loginButton" type="submit" class="btn btn-primary">登录</button>
            </form>
        </div>
    </div>

    <!-- 管理面板 -->
    <div id="adminPanel" class="admin-panel">
        <!-- 侧边栏 -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <div class="logo">
                    <i class="fas fa-graduation-cap"></i>
                    <span>校园活动平台</span>
                </div>
                <button id="sidebarToggle" class="sidebar-toggle" aria-label="折叠侧边栏">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
            <div class="sidebar-user">
                <img id="currentUserAvatar" src="/images/default-avatar.png" alt="用户头像" class="user-avatar">
                <div class="user-info">
                    <div id="currentUserName" class="user-name">管理员</div>
                    <div id="currentUserRole" class="user-role">管理员</div>
                </div>
            </div>
            <nav class="sidebar-menu">
                <a href="#" id="dashboard-tab" class="tab-link active" data-target="dashboard-content">
                    <i class="fas fa-tachometer-alt"></i>
                    <span>仪表盘</span>
                </a>
                <a href="#" id="users-tab" class="tab-link" data-target="users-content">
                    <i class="fas fa-users"></i>
                    <span>用户管理</span>
                </a>
                <a href="#" id="activities-tab" class="tab-link" data-target="activities-content">
                    <i class="fas fa-calendar-alt"></i>
                    <span>活动管理</span>
                </a>
                <a href="#" id="badges-tab" class="tab-link" data-target="badges-content">
                    <i class="fas fa-award"></i>
                    <span>徽章管理</span>
                </a>
                <a href="#" id="content-tab" class="tab-link" data-target="content-content">
                    <i class="fas fa-file-alt"></i>
                    <span>内容管理</span>
                </a>
                <a href="#" id="reports-tab" class="tab-link" data-target="reports-content">
                    <i class="fas fa-chart-line"></i>
                    <span>统计报表</span>
                </a>
                <a href="#" id="settings-tab" class="tab-link" data-target="settings-content">
                    <i class="fas fa-cog"></i>
                    <span>系统设置</span>
                </a>
                <a href="#" id="logoutBtn" class="logout-link">
                    <i class="fas fa-sign-out-alt"></i>
                    <span>退出登录</span>
                </a>
            </nav>
        </aside>

        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 顶部导航栏 -->
            <header class="top-bar">
                <button id="mobileMenuBtn" class="mobile-menu-btn" aria-label="移动菜单">
                    <i class="fas fa-bars"></i>
                </button>
                <div class="search-bar">
                    <i class="fas fa-search"></i>
                    <input type="text" id="globalSearchInput" placeholder="全局搜索...">
                </div>
                <div class="top-bar-actions">
                    <button id="darkModeToggle" class="action-button" aria-label="切换暗色模式">
                        <i class="fas fa-moon"></i>
                    </button>
                    <div class="notification-dropdown">
                        <button class="action-button">
                            <i class="fas fa-bell"></i>
                            <span class="badge">3</span>
                        </button>
                        <div class="dropdown-content">
                            <div class="dropdown-header">
                                <h3>通知</h3>
                                <a href="#">标记所有为已读</a>
                            </div>
                            <div class="dropdown-item">
                                <i class="fas fa-user-plus"></i>
                                <div class="item-content">
                                    <p>新用户注册</p>
                                    <span>10分钟前</span>
                                </div>
                            </div>
                            <div class="dropdown-item">
                                <i class="fas fa-calendar-check"></i>
                                <div class="item-content">
                                    <p>新活动等待审核</p>
                                    <span>1小时前</span>
                                </div>
                            </div>
                            <div class="dropdown-item">
                                <i class="fas fa-exclamation-triangle"></i>
                                <div class="item-content">
                                    <p>系统警告</p>
                                    <span>1天前</span>
                                </div>
                            </div>
                            <div class="dropdown-footer">
                                <a href="#">查看所有通知</a>
                            </div>
                        </div>
                    </div>
                </div>
            </header>

            <!-- 内容区域 -->
            <div class="content">
                <!-- 仪表盘内容 -->
                <section id="dashboard-content" class="tab-content active">
                    <h1 class="section-title">仪表盘</h1>
                    <p class="section-description">系统概览和关键指标</p>

                    <!-- 统计卡片 -->
                    <div class="stats-cards">
                        <div class="stat-card">
                            <div class="stat-icon">
                                <i class="fas fa-users"></i>
                            </div>
                            <div class="stat-info">
                                <h3>总用户数</h3>
                                <p id="totalUsers">0</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon">
                                <i class="fas fa-calendar-alt"></i>
                            </div>
                            <div class="stat-info">
                                <h3>总活动数</h3>
                                <p id="totalActivities">0</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon">
                                <i class="fas fa-award"></i>
                            </div>
                            <div class="stat-info">
                                <h3>总徽章数</h3>
                                <p id="totalBadges">0</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon">
                                <i class="fas fa-file-alt"></i>
                            </div>
                            <div class="stat-info">
                                <h3>总动态数</h3>
                                <p id="totalFeeds">0</p>
                            </div>
                        </div>
                    </div>

                    <!-- 图表区域 -->
                    <div class="chart-container">
                        <div class="chart-card">
                            <h3>用户增长趋势</h3>
                            <div class="chart-wrapper">
                                <canvas id="userGrowthChart"></canvas>
                            </div>
                        </div>
                        <div class="chart-card">
                            <h3>活动类型分布</h3>
                            <div class="chart-wrapper">
                                <canvas id="activityTypeChart"></canvas>
                            </div>
                        </div>
                    </div>

                    <!-- 最近活动 -->
                    <div class="recent-activities">
                        <div class="card-header">
                            <h3>最近活动</h3>
                            <a href="#" class="btn btn-sm" onclick="loadMoreActivities()">查看所有</a>
                        </div>
                        <div class="table-responsive">
                            <table id="recentActivitiesTable">
                                <thead>
                                    <tr>
                                        <th>活动名称</th>
                                        <th>创建者</th>
                                        <th>状态</th>
                                        <th>创建时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td colspan="5" class="text-center">加载中...</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </section>

                <!-- 用户管理内容 -->
                <section id="users-content" class="tab-content">
                    <h1 class="section-title">用户管理</h1>
                    <p class="section-description">管理系统用户、角色和权限</p>

                    <!-- 用户管理工具栏 -->
                    <div class="toolbar">
                        <div class="search-wrapper">
                            <i class="fas fa-search"></i>
                            <input type="text" id="userSearchInput" placeholder="搜索用户...">
                        </div>
                        <div class="filters">
                            <select id="userRoleFilter" aria-label="用户角色筛选">
                                <option value="">所有角色</option>
                                <option value="user">普通用户</option>
                                <option value="moderator">版主</option>
                                <option value="admin">管理员</option>
                                <option value="superadmin">超级管理员</option>
                            </select>
                            <select id="userStatusFilter" aria-label="用户状态筛选">
                                <option value="">所有状态</option>
                                <option value="active">活跃</option>
                                <option value="inactive">禁用</option>
                            </select>
                        </div>
                        <button id="createUserBtn" class="btn btn-primary">
                            <i class="fas fa-plus"></i> 创建用户
                        </button>
                    </div>

                    <!-- 用户表格 -->
                    <div class="table-responsive">
                        <table id="usersTable">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>用户名</th>
                                    <th>邮箱</th>
                                    <th>角色</th>
                                    <th>状态</th>
                                    <th>注册时间</th>
                                    <th>最后登录</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td colspan="8" class="text-center">加载中...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页 -->
                    <div id="usersPagination" class="pagination"></div>

                    <!-- 用户表单模态框 -->
                    <div id="userModal" class="modal">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h2 id="userModalTitle">创建用户</h2>
                                <button class="close-modal">&times;</button>
                            </div>
                            <div class="modal-body">
                                <form id="userForm">
                                    <div class="form-group">
                                        <label for="username">用户名</label>
                                        <input type="text" id="username" name="username" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="email">邮箱</label>
                                        <input type="email" id="email" name="email" required>
                                    </div>
                                    <div class="form-group new-user-only">
                                        <label for="password">密码</label>
                                        <input type="password" id="password" name="password">
                                        <small>创建新用户时必填</small>
                                    </div>
                                    <div class="form-group">
                                        <label for="role">角色</label>
                                        <select id="role" name="role" required>
                                            <option value="user">普通用户</option>
                                            <option value="moderator">版主</option>
                                            <option value="admin">管理员</option>
                                            <option value="superadmin">超级管理员</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="is_active">状态</label>
                                        <select id="is_active" name="is_active" required>
                                            <option value="1">活跃</option>
                                            <option value="0">禁用</option>
                                        </select>
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button class="btn btn-secondary close-modal">取消</button>
                                <button id="saveUserBtn" class="btn btn-primary">保存</button>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 活动管理内容 -->
                <section id="activities-content" class="tab-content">
                    <h1 class="section-title">活动管理</h1>
                    <p class="section-description">审核和管理校园活动</p>

                    <!-- 活动管理工具栏 -->
                    <div class="toolbar">
                        <div class="search-wrapper">
                            <i class="fas fa-search"></i>
                            <input type="text" id="activitySearchInput" placeholder="搜索活动...">
                        </div>
                        <div class="filters">
                            <select id="activityStatusFilter" aria-label="活动状态筛选">
                                <option value="">所有状态</option>
                                <option value="pending">待审核</option>
                                <option value="approved">已批准</option>
                                <option value="rejected">已拒绝</option>
                            </select>
                            <select id="activityTypeFilter" aria-label="活动类型筛选">
                                <option value="">所有类型</option>
                                <option value="academic">学术</option>
                                <option value="sports">运动</option>
                                <option value="social">社交</option>
                                <option value="cultural">文艺</option>
                                <option value="volunteer">志愿</option>
                            </select>
                        </div>
                    </div>

                    <!-- 活动表格 -->
                    <div class="table-responsive">
                        <table id="activitiesTable">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>活动名称</th>
                                    <th>创建者</th>
                                    <th>类型</th>
                                    <th>状态</th>
                                    <th>开始时间</th>
                                    <th>结束时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td colspan="8" class="text-center">加载中...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页 -->
                    <div id="activitiesPagination" class="pagination"></div>
                </section>

                <!-- 徽章管理内容 -->
                <section id="badges-content" class="tab-content">
                    <h1 class="section-title">徽章管理</h1>
                    <p class="section-description">管理系统徽章和发放记录</p>

                    <!-- 徽章标签页 -->
                    <div class="tabs">
                        <button class="tab-button active" data-tab="badges-list">徽章列表</button>
                        <button class="tab-button" data-tab="badge-records">发放记录</button>
                    </div>

                    <!-- 徽章列表 -->
                    <div id="badges-list" class="tab-pane active">
                        <!-- 徽章搜索 -->
                        <div class="toolbar">
                            <div class="search-wrapper">
                                <i class="fas fa-search"></i>
                                <input type="text" id="badgeSearchInput" placeholder="搜索徽章...">
                            </div>
                            <button id="createBadgeBtn" class="btn btn-primary">
                                <i class="fas fa-plus"></i> 创建徽章
                            </button>
                        </div>

                        <!-- 徽章网格 -->
                        <div class="badges-grid">
                            <!-- 徽章卡片将在这里动态生成 -->
                            <div class="badge-card">
                                <div style="width: 80px; height: 80px; margin: 0 auto 15px; display: flex; justify-content: center; align-items: center; background-color: #f8f9fa; border-radius: 50%;">
                                    <i class="fas fa-plus" style="font-size: 24px; color: #4e73df;"></i>
                                </div>
                                <div class="badge-title">创建新徽章</div>
                                <div class="badge-description">添加新的系统徽章</div>
                                <button class="btn btn-primary" onclick="showCreateBadgeModal()">创建徽章</button>
                            </div>
                        </div>
                    </div>

                    <!-- 徽章发放记录 -->
                    <div id="badge-records" class="tab-pane">
                        <!-- 记录表格 -->
                        <div class="table-responsive">
                            <table id="badgeRecordsTable">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>徽章</th>
                                        <th>用户</th>
                                        <th>发放时间</th>
                                        <th>发放原因</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td colspan="6" class="text-center">加载中...</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <!-- 分页 -->
                        <div id="badgeRecordsPagination" class="pagination"></div>
                    </div>
                </section>

                <!-- 其他内容区域（内容管理、报表、设置）可以按类似结构添加 -->
                <section id="content-content" class="tab-content">
                    <h1 class="section-title">内容管理</h1>
                    <p class="section-description">管理系统内容和用户动态</p>
                    <!-- 内容管理的具体实现 -->
                    <div class="placeholder-content">
                        <i class="fas fa-file-alt placeholder-icon"></i>
                        <h3>内容管理功能开发中...</h3>
                        <p>此功能将在下一版本中实现</p>
                    </div>
                </section>

                <section id="reports-content" class="tab-content">
                    <h1 class="section-title">统计报表</h1>
                    <p class="section-description">系统数据分析和报表</p>
                    <!-- 统计报表的具体实现 -->
                    <div class="placeholder-content">
                        <i class="fas fa-chart-line placeholder-icon"></i>
                        <h3>统计报表功能开发中...</h3>
                        <p>此功能将在下一版本中实现</p>
                    </div>
                </section>

                <section id="settings-content" class="tab-content">
                    <h1 class="section-title">系统设置</h1>
                    <p class="section-description">配置系统参数和选项</p>
                    <!-- 系统设置的具体实现 -->
                    <div class="tabs">
                        <button class="tab-button active" data-tab="basic-settings">基本设置</button>
                        <button class="tab-button" data-tab="security-settings">安全设置</button>
                    </div>
                    
                    <div id="basic-settings" class="tab-pane active">
                        <form id="basicSettingsForm" class="settings-form">
                            <div class="form-group">
                                <label for="siteName">站点名称</label>
                                <input type="text" id="siteName" name="siteName" value="校园活动社交平台">
                            </div>
                            <div class="form-group">
                                <label for="siteDescription">站点描述</label>
                                <textarea id="siteDescription" name="siteDescription">校园活动社交平台是一个连接学生和活动的平台</textarea>
                            </div>
                            <div class="form-group">
                                <label for="contactEmail">联系邮箱</label>
                                <input type="email" id="contactEmail" name="contactEmail" value="contact@example.com">
                            </div>
                            <button type="submit" class="btn btn-primary">保存设置</button>
                        </form>
                    </div>
                    
                    <div id="security-settings" class="tab-pane">
                        <form id="securitySettingsForm" class="settings-form">
                            <div class="form-group">
                                <label for="enableRegistration">开放注册</label>
                                <div class="toggle-switch">
                                    <input type="checkbox" id="enableRegistration" name="enableRegistration" checked>
                                    <label for="enableRegistration"></label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="enableActivityCreation">允许创建活动</label>
                                <div class="toggle-switch">
                                    <input type="checkbox" id="enableActivityCreation" name="enableActivityCreation" checked>
                                    <label for="enableActivityCreation"></label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="contentModeration">内容审核</label>
                                <div class="toggle-switch">
                                    <input type="checkbox" id="contentModeration" name="contentModeration" checked>
                                    <label for="contentModeration"></label>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary">保存设置</button>
                        </form>
                    </div>
                </section>
            </div>
        </main>
    </div>

    <script src="admin.js"></script>
</body>
</html> 